<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-controller="Ctrl as c">
<panel name="panel-title" options="c.options" class="panel old-class"></panel>
<script src="../../../../../../../bower_components/angular/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.directive('panel', [function () {

        function link(scope, element, attrs) {
            var camelCase = attrs.$normalize('x-ag-xx-name'); // camelCase -> agXxName. $normalize replace掉以 x- 及data- 开头的之后再以驼峰式命名
            console.log('x-ag-xx-name: ', camelCase);
            attrs.$addClass('panel-class'); // 添加class
            attrs.$removeClass('panel'); // 删除class
            attrs.$updateClass('new-class', 'old-class'); // 删掉 old-class 添加 new-class
            // 监控 element 的某个属性, 与 $watch 一样, 但是 attrs 需要用 $observe
            attrs.$observe('options', function (value) {
                console.log(value);
            });
            setTimeout(function () {
                attrs.$set('options', 'change'); // 给 element 添加/更改属性值
            }, 1500);
        }

        return {
            restrict: 'EA',
            link: link
        }
    }]);
    app.controller('Ctrl', [function () {
        var vm = this;
        vm.options = {
            id: 1,
            version: '0.0.1'
        };
    }]);
</script>
</body>
</html>